<template>
	<!-- 首页 -->

	<view class="home">

		<scroll-view scroll-x class="scrollNav">
			<view class="item" :class="index==navInndex?'active':''" v-for="(item,index) in navArr"
				@click="clickNav(index,item.id)" :key="item.id">{{item.classname}}
			</view>
		</scroll-view>

		<view class="content">
			<view class="row" v-for="item in newArr" :key="item.id">
				<newsBox :item=item @click.native="getDetail(item)"></newsBox>
			</view>
		</view>

		<view class="nodata" v-if="!newArr.length">
			<image src="../../static/images/nodata.png" mode=""></image>
		</view>
		<view class="loading" v-if="newArr.length">
			<view v-if="loading ==1">数据加载中...
			</view>
			<view v-if="loading == 2">没有更多数据了~~
			</view>

		</view>
		

	</view>
</template>

<script>
	export default {
		data() {
			return {
				navInndex: 0,
				navArr: [],
				newArr: [],
				currentPage: 1,
				loading: 0 //0默认 1加载中 2没有更多了
			}
		},
		onLoad() {
			this.getNavData()
			this.getNewData()
		},
		onReachBottom() {
			// 如果已经没有数据了，就不再请求数据了
			if (this.loading == 2) {
				return;
			}
			this.currentPage++
			this.loading = 1
			this.getNewData()
		},
		methods: {
			// 点击切换导航
			clickNav(index, id) {
				this.navInndex = index
				this.currentPage = 1
				this.loading = 0
				this.newArr = []
				this.getNewData(id)

			},
			// 点击跳转详情页
			getDetail(item) {
				console.log(item);
				uni.navigateTo({
					url: `/pages/detail/detail?cid=${item.classid}&id=${item.id}`
				})
			},

			// 获取导航列表数据
			getNavData() {
				uni.request({
					url: "https://ku.qingnian8.com/dataApi/news/navlist.php",

					success: res => {
						this.navArr = res.data

					}
				})
			},
			getNewData(id = 50) {
				uni.request({
					url: "https://ku.qingnian8.com/dataApi/news/newslist.php",
					data: {
						cid: id,
						page: this.currentPage
					},
					success: res => {
						if (res.data.length == 0) {
							this.loading = 2
						}
						// 用es6的数组解构
						this.newArr = [...this.newArr, ...res.data]
					}
				})
			}



		}
	}
</script>

<style lang="scss" scoped>
	.home {
		.scrollNav {
			height: 100rpx;
			background: #e9ebed;
			white-space: nowrap;
			position: fixed;
			top: let(--window-top);
			left: 0;
			z-index: 10;

			/deep/ ::-webkit-scrollbar {
				width: 4px !important;
				height: 1px !important;
				overflow: auto !important;
				background: transparent !important;
				-webkit-appearance: auto !important;
				display: block;

			}

			.item {
				font-size: 40rpx;
				display: inline-block;
				padding: 0 30rpx;
				line-height: 100rpx;

				&.active {
					color: #2cad72;
				}
			}
		}

		.content {
			padding: 30rpx;
			padding-top: 130rpx;

			.row {
				border-bottom: 1rpx dotted #efefef;
				padding: 20rpx 0;
			}
		}

		.loading {
			text-align: center;
			font-size: 26rpx;
			color: #888;
			line-height: 2em;
		}
	}
</style>
